import React, { Component } from 'react'
import { Button, Form, Input, Select, Space, Cascader } from 'antd'
import TheButton from '@/components/TheButton'
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheDialog from '@/components/TheDialog'
import { apiGetGoodsClassifyList, apiGetGoodsClassifyTree, apiGetGoodsSpecificationsPage, apiGetGoodsSpecificationsAdd, apiGetGoodsSpecificationsEdit, apiGetGoodsSpecificationsDel } from '@/request/mallManagement'

export default class parameter extends Component {
  state = {
    columns: [
      {
        title: '参数名称',
        dataIndex: 'specificationsName',
        key: 'specificationsName'
      },
      {
        title: '所属分类',
        dataIndex: 'goodsClassifyName',
        key: 'goodsClassifyName'
      },
      {
        title: '操作',
        render: (text, record) => {
          return <>
            <TheButton haspermi={['mall:parameter:edit']} onClick={() => this.editDialog(record)}>修改</TheButton>
            <TheButton haspermi={['mall:parameter:delete']} onClick={() => this.delConfirm(record)}>删除</TheButton>
          </>
        }
      },
    ],
    dataSource: [1],
    pageData: {
      pageNo: 1,
      pageSize: 10
    },
    total: 0,
    visible: false,
    title: '',
    type: "",
    editValue: '',
    classifyList: [],
    classifyOption:[],
    classifyId: ''
  }
  componentDidMount() {
    this.getClassifyList()
    this.getData()
  }
  getClassifyList = async () => {
    let resList = await apiGetGoodsClassifyList({level:2})
    if (resList.code === 0 && resList.data) {
      this.setState({
        classifyOption: resList.data.map(v => {
          return {
            value: v.goodsClassifyId,
            label: v.goodsClassifyName,
          }
        })
      })
    }
    let resTree = await apiGetGoodsClassifyTree()
    if (resTree.code === 0 && resTree.data) {
      this.setState({
        classifyList: resTree.data.map(v => {
          return {
            value: v.value,
            label: v.label,
            children:v.children.length>0?v.children:[]
          }
        })
      })
    }
  }
  getData = async () => {
    const { classifyId, pageData } = this.state
    let res = await apiGetGoodsSpecificationsPage({ classifyId, ...pageData })
    if (res.data && res.code === 0) {
      this.setState({
        dataSource: res.data,
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        total: res.totalCount
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  }
  openDialog = () => {
    this.setState({
      visible: true,
      title: '新增商城商品参数',
      type: 'add'
    })
  }
  editDialog = value => {
    this.setState({
      visible: true,
      title: '修改商城商品参数',
      type: 'edit',
      editValue: {...value,classifyId:value.hasOwnProperty('classifyIdStr')&&value.classifyIdStr?value.classifyIdStr.split(','):''}
    })
  }
  closeDialog = () => {
    this.setState({
      visible: false,
      title: '',
      type: '',
      editValue: {}
    })
  }
  dialogSave = async value => {
    const { type, editValue } = this.state
    if(value.classifyId.length<3){
      React.$message({
        type: 'warning',
        content: '请选择三级类目'
      })
      return false
    }
    value.classifyIdStr = value.classifyId
    value.classifyId = value.classifyId.slice(-1)
    if (type === 'add') {
      let res = await apiGetGoodsSpecificationsAdd({ ...value })
      if (res.code === 0) {
        React.$message({
          type: "info",
          content: '新增成功'
        })
        this.closeDialog()
        this.getData()
      }
    }
    if (type === 'edit') {
      let res = await apiGetGoodsSpecificationsEdit({ specificationsId: editValue.specificationsId, ...value })
      if (res.code === 0) {
        React.$message({
          type: "info",
          content: '修改成功'
        })
        this.closeDialog()
        this.getData()
      }
    }
  }
  delConfirm = (value) => {
    React.$confirm({
      title: '您确认删除此条商品参数吗？',
      onOk: async () => {
        let res = await apiGetGoodsSpecificationsDel({ specificationsId: value.specificationsId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '删除成功'
          })
          this.getData()
        }
      }
    })
  }
  setSearchValue = classifyId => {
    this.setState({
      classifyId: classifyId || '',
      pageData: {
        pageNo: 1,
        pageSize: 10
      }
    }, () => {
      this.getData()
    })
  }
  onChange = (value) => {
    console.log(value);
   
  };
  render() {
    const { columns, dataSource,classifyOption, pageData: { pageNo, pageSize }, total, visible, title, editValue, classifyList } = this.state
    return (
      <div className='p-layout-box'>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div>
            <span>所属类目：</span>
            <Select onChange={this.setSearchValue} options={classifyOption} style={{ width: 200 }} placeholder="请选择所属类目" allowClear />
          </div>
          <TheButton type="default" size="middle" haspermi={['mall:parameter:add']} onClick={this.openDialog}>新建参数</TheButton>
        </div>
        <div className="p-layout-content-pagination">
          <TheTable columns={columns} dataSource={dataSource} />
          <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
        </div>
        <TheDialog
          visible={visible}
          title={title}
          width={400}
          footer={null}
          handleCancel={this.closeDialog}
        >
          <Form onFinish={this.dialogSave} initialValues={editValue}>
            <Form.Item label="名称" name="specificationsName" rules={[{ required: true }]}>
              <Input maxLength={15} placeholder="请输入参数名称" />
            </Form.Item>
            <Form.Item label="类目" name="classifyId" rules={[{ required: true }]}>
              <Cascader options={classifyList} onBlur={this.onChange} width={200} changeOnSelect placeholder="请选择商品类目" />
              {/* <Select options={classifyList} width={200} placeholder="请选择商品类目" /> */}
            </Form.Item>
            <Form.Item>
              <div style={{ display: "flex", justifyContent: 'flex-end', marginBottom: -30 }}>
                <Space>
                  <Button onClick={this.closeDialog}>取消</Button>
                  <Button type='primary' htmlType='submit'>确认</Button>
                </Space>
              </div>
            </Form.Item>
          </Form>
        </TheDialog>
      </div>
    )
  }
}
